<template>
    <div class="header">
        <div class="header_bottom">
            <div class="logo">
                <a href="javascript:;">
                    <img src="/static/images/logo.png" alt="">
                </a>
            </div>
            <div class="navbar">
                <ul class="nav_list">
                    <li class="nav_item"  :class="route== '/' ?' nav_active':''">
                        <a href="#/">
                            <div class="nav_name">首页</div>
                            <img src="/static/images/nav_img.png" alt="" class="none">
                            <img src="/static/images/nav_active.png" alt="" class="show">
                        </a>
                    </li>
                    <li class="nav_item" :class="route.indexOf('/work') >= 0 || route.indexOf('/detail')>=0|| route.indexOf('/userdetail')>=0 ?' nav_active':''">
                        <a href="#/work">
                            <div class="nav_name">双带头工作室</div>
                            <img src="/static/images/nav_img.png" alt="" class="none">
                            <img src="/static/images/nav_active.png" alt="" class="show">
                        </a>
                    </li>
                    <li class="nav_item" :class="route.indexOf('/manage') >= 0 || route.indexOf('/result') >= 0 ?' nav_active':''">
                        <a href="#/manage">
                            <div class="nav_name">实绩管理</div>
                            <img src="/static/images/nav_img.png" alt="" class="none">
                            <img src="/static/images/nav_active.png" alt="" class="show">
                        </a>
                    </li>
                    <li class="nav_item" :class="route.indexOf('/display') >= 0 ?' nav_active':''">
                        <a href="#/display">
                            <div class="nav_name">VR党建展厅</div>
                            <img src="/static/images/nav_img.png" alt="" class="none">
                            <img src="/static/images/nav_active.png" alt="" class="show">
                        </a>
                    </li>
                    <li class="nav_item" :class="route.indexOf('/space') >= 0 ?' nav_active':''">
                        <a href="#/space">
                            <div class="nav_name">创客空间</div>
                            <img src="/static/images/nav_img.png" alt="" class="none">
                            <img src="/static/images/nav_active.png" alt="" class="show">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'commonheader',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        route:''
      }
    },
    created(){
        this.route = this.$route.path
    },
    watch:{
        $route:{
            handler(newval,oldval){
                this.route = newval.path
            },
            deep:true,
            immediate:true
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
    @import '@/assets/css/common.scss';
    
  </style>
  